<template>
    <div class="coming-container">
        <div class="film-expected">
            <p>最近受期待</p>
            <ul v-infinite-scroll="loadMore"
                infinite-scroll-disabled="loading"
                infinite-scroll-distance="10">
                <li v-for="item in mostExpected" :key="item.id">
                    <div class="img">
                        <img v-lazy="picFix(item.img)">
                        <p>{{item.wish+"人想看"}}</p>
                    </div>
                    <span class="info">
                        <span>{{item.nm}}</span>
                        <span>{{item.comingTitle}}</span>
                    </span>
                </li>
            </ul>
        </div>

        <div class="film">
            <ul>
                <li v-for="(time,i) in comingTime" :key="time[i]">
                    <p>{{i}}</p>
                    <div class="film-ccc" v-for="item in time" :key="item.id">
                        <span class="film-content">
                            <img v-lazy="picFix(item.img)">
                            <span class="film-info">
                                <span class="film-name"><h1>{{item.nm}}</h1><span :class="['icon',item.version=='v2d imax' ? 'active1' : '', item.version=='v3d imax' ? 'active2' : '']" ></span></span>
                                <p class="film-sc" v-if="item.sc!=0">点映评<span>{{item.sc}}</span></p>
                                <p class="film-sc" v-else><span>{{item.wish}}</span>人想看</p>
                                <p>主演:{{item.star}}</p>
                                <p>{{item.showInfo}}</p>
                            </span>
                        </span>
                        <mt-button :type="item.preShow==true ? 'danger' : 'primary'" size="small" >
                            {{item.preShow==true ? "想看" : "预售"}}
                        </mt-button>
                    </div>
                </li>
            </ul>
        </div>
        <div class="loading" v-show="coming.length">
            <mt-spinner color="rgb(100, 100, 100)" type="fading-circle"></mt-spinner>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            mostExpected:[],
            offset:0,
            loading:false,
            comingList:[],
            filmIds:[],
            coming:[],
            comingTime:{}
        }
    },
    created(){
        this.getMostExpected(this.offset)
        console.log(this.offset)
        this.getComingList()
        console.log(this.comingTime)
    },
    methods:{
        picFix(wh) {
            if (wh !== undefined) {
                return wh.replace("w.h", "64.90");
            }
        },
        loadMore() {
            this.loading = true;
            this.offset += 5;
            this.getMostExpected(this.offset);
            this.loading = false;
        },
        fangdou(callback, delay) {
            // 定时器
            var timer;
            return function() {
                if (timer) {
                    // 引用外部函数的timer
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    callback.apply(this, arguments);
                }, delay);
            };
        },
        // fenzu(){
        //     this.comingList.forEach(item=>{
        //         // if(item.comingTitle)
        //         if(!this.comingTime[item.comingTitle]){
        //             this.comingTime[item.comingTitle]=[]
        //         }
        //         if(this.comingTime[item.comingTitle].indexOf(item)==-1){
        //             this.comingTime[item.comingTitle].push(item)
        //         }
        //     })
            // console.log(this.comingTime+"---")
                    // result.body.coming.forEach(item=>{
                    //     if(this.comingTime.indexOf(item.comingTitle)==-1){
                    //         this.comingTime = this.comingTime.concat(item.comingTitle)
                    //     }
                    // })
                    // console.log(this.comingTime)
        // },
        getMostExpected(offset){
            this.$http.get('mostExpected',{
                params:{
                    ci:20,
                    token:"",
                    limit:5,
                    offset:offset
                }
            }).then(result=>{
                if(result.body.coming.length != 0){
                    this.mostExpected = this.mostExpected.concat(result.body.coming)
                    console.log(this.mostExpected)
                }else{
                    return false;
                }
            })
        },
        getComingList(){
            var that = this;
            this.$http.get('comingList',{
                params:{
                    ci:20,
                    token:"",
                    limit:10
                }
            }).then(result=>{
                if(result.status==200){
                    console.log(result)
                    this.comingList=result.body.coming
                    this.filmIds = result.body.movieIds
                    
                    this.comingList.forEach(item=>{
                    // if(item.comingTitle)
                        if(!this.comingTime[item.comingTitle]){
                            this.comingTime[item.comingTitle]=[]
                        }
                        if(this.comingTime[item.comingTitle].indexOf(item)==-1){
                            this.comingTime[item.comingTitle].push(item)
                        }
                    })
                    // result.body.coming.forEach(item=>{
                    //     if(this.comingTime.indexOf(item.comingTitle)==-1){
                    //         this.comingTime = this.comingTime.concat(item.comingTitle)
                    //     }
                    //     // console.log(this.comingTime)
                    // })
                    console.log(this.comingTime)
                    
                    document.addEventListener(
                        "scroll",
                        this.fangdou(function() {
                            that.getMoreComing(that.filmIds);
                        }, 500)
                    );
                }
            })
        },
        getMoreComing(filmIds){
            // console.log(filmIds)
            var flag = true;
            //获得滚动条距离顶部距离
            var scrollTop = document.documentElement.scrollTop;
            // 获取页面高度
            var pageHeight = document.documentElement.scrollHeight;
            // 获取视口高度
            var windowHeight = window.innerHeight;
            if (scrollTop + pageHeight == windowHeight && flag == true) {
                flag = false;
            }
            let start = 12;
            let limit = 12;
            // console.log(this.filmIds.splice(12,12))
            filmIds = filmIds.splice(12,12).join(",")
            // console.log(filmIds)
            // console.log(this.filmIds)
            this.$http.get('moreComingList',{
                params:{
                    token:"",
                    movieIds:filmIds
                }
            }).then(result=>{
                if(result.status==200){
                    // console.log(this.comingTime)
                    this.coming=result.body.coming
                    this.comingList = this.comingList.concat(result.body.coming)
                    console.log(this.comingList)
                    // console.log(that.comingTime+"---")
                    // this.comingList.forEach(item=>{
                    //     // if(item.comingTitle)
                    // if(!this.comingTime[item.comingTitle]){
                    //     this.comingTime[item.comingTitle]=[]
                    // }
                    //     this.comingTime[item.comingTitle].push(item)
                    // })
                    this.comingList.forEach(item=>{
                        // if(item.comingTitle)
                        if(!this.comingTime[item.comingTitle]){
                            this.comingTime[item.comingTitle]=[]
                        }
                        if(this.comingTime[item.comingTitle].indexOf(item)==-1){
                            this.comingTime[item.comingTitle].push(item)
                        }
                    })
                    
                    // console.log(this.comingTime+"---")
                }
            })

        }
    }
}
</script>
<style lang="scss" scoped>
*{ touch-action: pan-x; }
.coming-container{
    padding:10px 15px;
    .film-expected{
        overflow-x:hidden;
        p{
            color: black;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            overflow: scroll;
            &::-webkit-scrollbar {
                display: none;
            }
            li{
                display: inline-block;
                width: 85px;
                margin-right: 10px;
                .img{
                    width: 85px;
                    height: 115px;
                    text-align: center;
                    position: relative;
                    p{
                        width: 85px;
                        text-align: center;
                        color: orange;
                        font-size: 12px;
                        position: absolute;
                        top:95px;
                    }
                    img{
                        width: 85px;
                        height: 115px;
                        background-color: #ccc;
                    }
                    img[lazy="loading"] {
                        width: 85px;
                        height: 115px;
                    }
                }
                .info{
                    font-size: 12px;
                    display: flex;
                    flex-direction: column;
                    span{
                        font-size: 13px;
                        width: 85px;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    span:nth-child(2){
                        margin-top: -5px;
                        color: rgb(163, 163, 163);
                    }
                }
            }
        }
    }
    .film{
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
            padding-top: 10px;
            li{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-top: 20px;
                p{
                    color: black;
                }
                .film-ccc{
                    display: flex;
                    align-items: center;
                    padding-bottom: 10px;
                    img{
                        background-color: #ccc;
                    }
                    img[lazy="loading"] {
                        width: 64px;
                        height: 90px;
                    }
                    .film-content{
                        display: flex;
                        justify-content: space-between;
                        width: 285px;
                        .film-info{
                            width: 210px;
                            .film-name{
                                display: flex;
                                h1{
                                    font-size: 16px;
                                    width: 150px;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                }
                                .icon {
                                    line-height: 14px;
                                    display: inline-block;
                                    margin-top: 5px;
                                    -webkit-box-flex: 0;
                                    flex: 0 0 auto;
                                    border-radius: 2px;
                                    margin-right: 3px;
                                    color: #3c9fe6;
                                    width: 43px;
                                    height: 14px;
                                }
                                .active1 {
                                    background: url('../../images/2d_max.png') no-repeat;
                                    background-size: 43px 14px;
                                }
                                .active2 {
                                    background: url('../../images/3d_max.png') no-repeat;
                                    background-size: 43px 14px;
                                }
                            }
                            .film-sc{
                                span{
                                    font-size: 15px;
                                    font-weight: bold;
                                    color: rgb(255, 115, 0);
                                }
                            }
                            p{
                                margin: 0;
                                padding: 0;
                                font-size: 13px;
                                color: rgb(22, 22, 22);
                                width: 205px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
    }
    .loading{
        margin-left: 45%;
    }
}
</style>
